<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择文件上传</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
	<div class="layui-container" style="margin-top: 200px">     
	  <div class="layui-row">
	    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="border: 1px solid black;">
	 		<div id="fileTreeContainer"></div>
	    </div>
	    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-md-offset1" style="border: 1px solid black;">
			<form class="layui-form" style="margin: 5px">
				<div class="layui-form-item">
				    <label class="layui-form-label">本地文件路径</label>
				    <div class="layui-input-block">
				      <input type="text" id="local_file_path_text" name="local_file_path_text" required placeholder="请输入本地文件路径" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">远程文件文件夹</label>
				    <div class="layui-input-block">
				      <input type="text" id="romote_file_dir_text" name="romote_file_dir_text" required placeholder="请输入远程文件夹" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">远程文件文件名</label>
				    <div class="layui-input-block">
				      <input type="text" id="romote_file_name_text" name="romote_file_name_text" required placeholder="请输入远程文件文件名" autocomplete="off" class="layui-input">
				    </div>
			    </div>
			    <div class="layui-form-item">
				    <label class="layui-form-label">apiConfig的ID</label>
				    <div class="layui-input-block">
				      <input type="text" id="api_config_id_text" name="api_config_id_text" required placeholder="请输入apiConfigd的Id" autocomplete="off" class="layui-input">
				    </div>
			    </div>
			</form>
			<button type="button" id="upload_button" class="layui-btn layui-btn-primary" style="margin: 5px">上传</button>
	    </div>
	  </div>
	</div>
</body>
<script src="layui/layui.js"></script>
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
	var movie ="mp4,avi,mkv,wmv,rmvb"; 
	$.ajax({
		url:"getDirectoryAllFile",
		type:"GET",
		//data:{"path":"D:/CPUID/CPU-Z"},
		data:{},
		dataType:"json",
		success:function(response){
			if(response.code == 0){
				initTree(response.fileInfoList);
			}
		}
	})
	
	function initTree(json){
		layui.use('tree', function(){
		    var tree = layui.tree;
		    //渲染
		    var inst1 = tree.render({
		      elem: '#fileTreeContainer'  //绑定元素
		      ,data: json
		      ,text:{
		    	  defaultNodeName: '未命名' //节点默认名称
		    	  ,none: '文件夹为空' //数据为空时的提示文本
		      }
		      ,click: function(obj){
		    	  var fileInfo = obj.data; //得到当前点击的节点数据 
		    	  if(fileInfo.isDirectory == false){
		    		  var filepath = fileInfo.filePath;
		    		  var fileName = fileInfo.title;
		    		  $("#local_file_path_text").val(filepath);
		    		  $("#romote_file_name_text").val(fileName);
		    		  $("#romote_file_dir_text").val(getFileType(fileName) + "/" );
		    	  }
	    	  }
		    });
		  });
	}
	
	function getFileType(fileName){
		 var fileSurfixArr = movie.split(",");
		 var indexOf = fileSurfixArr.indexOf(fileName.substring(fileName.indexOf(".") + 1));
		 if(indexOf == -1){
			 return "file";
		 }else{
			 return "movie";
		 }
	}
	
	layui.use('form', function(){
		  var form = layui.form;
		});
	
	$("#upload_button").click(function(e){
		 var localFilePath = $("#local_file_path_text").val();
		 var remoteFileName = $("#romote_file_name_text").val();
		 var remoteFileDir = $("#romote_file_dir_text").val();
		 var apiConfigId = $("#api_config_id_text").val();
		 if(localFilePath == "" || remoteFileName == "" || remoteFileDir == "" || apiConfigId == ""){
			 alert("请检查输入,每一项都不能为空");
		 }else{
			 getUploadSession(remoteFileDir,remoteFileName,apiConfigId);
		 }
	});
	
	function getUploadSession(remoteFileDir, remoteFileName, apiConfigId){
		$.ajax({
			url:"getUploadSession",
			type:"GET",
			data:{"remoteFileDir":remoteFileDir,"remoteFileName":remoteFileName,"apiConfigId":apiConfigId},
			dataType:"json",
			success:function(response){
				console.log(response);
				if(response.code == 0){
					uploadFile(response.fileId);
				}else{
					alert(response.msg);
				}
			}
		})
	}
	
	function uploadFile(fileId){
		var path = $("#local_file_path_text").val();
		$.ajax({
			url:"uploadFile",
			type:"POST",
			data:{"fileId":fileId,"path":path},
			dataType:"json",
			success:function(response){
				console.log(response);
				if(response.code == 0){
					alert("上传成功，uploadId 为" + response.uploadId);
					 $("#local_file_path_text").val("");
					 $("#romote_file_name_text").val("");
					 $("#romote_file_dir_text").val("");
					 $("#api_config_id_text").val("");
				}else{
					alert(response.msg);
				}
			}
		})
	}
</script>
</html>